<template>
  <div class="article-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      left-arrow
      @click-left="$router.back()"
      @click-right="onClickRight"
    >
      <van-icon slot="right" name="ellipsis"></van-icon>
    </van-nav-bar>
    <div class="main_wrap">
      <!-- 加载中 -->
      <div v-if="isLoading" class="loading_wrap">
        <van-loading color="#3296fa" vertical>加载中</van-loading>
      </div>
      <!-- /加载中 -->
      <!-- 文章详情 -->
      <div v-else-if="articleContent.title" class="article_detail markdown-body">
        <!-- 题目 -->
        <h3 class="article_title">{{ articleContent.title }}</h3>
        <!-- 作者信息 -->
        <div class="author_info">
          <van-cell class="author">
            <van-image slot="icon" round :src="articleContent.aut_photo"></van-image>
            <div slot="title">
              <div class="aut_name">{{ articleContent.aut_name }}</div>
              <div class="pub_date">{{ articleContent.pubdate | relativeTime }}</div>
            </div>
          </van-cell>
          <follow v-model="isFollow" :author-id="articleContent.aut_id" :value="isFollow" @input="isFollow=$event"></follow>
        </div>
        <!-- 文章内容 -->
        <div class="article_content" v-html="articleContent.content"></div>
        <div class="article_comment"></div>
      </div>
      <!-- /文章详情 -->
      <!-- 加载失败：404 -->
      <div v-else-if="errStatus === 404" class="error_wrap">
        <van-icon name="failure"></van-icon>
        <p class="text">该资源不存在或已删除！</p>
      </div>
      <!-- /加载失败：404 -->

      <!-- 加载失败：其它未知错误（例如网络原因或服务端异常） -->
      <div v-else class="error_wrap">
        <van-icon name="failure"></van-icon>
        <p class="text">内容加载失败！</p>
        <van-button class="retry_btn" @click="loadArticle">点击重试</van-button>
      </div>
      <!-- /加载失败：其它未知错误（例如网络原因或服务端异常） -->
    </div>
    <!-- 评论区域 -->
    <div class="comment">
      <article-comment
        v-if="articleContent.art_id"
        :source-id="articleContent.art_id"
        :list="commentList"
        @replyCilck="getReply($event)"
      ></article-comment>
    </div>
    <!-- /评论区域 -->
    <!-- 底部区域 -->
    <div class="footer">
      <div class="left">
        <van-button plain round size="small" @click="popupShow=true">写评论</van-button>
      </div>
      <div class="right">
        <attitude v-model="attitude" :article-id="articleContent.art_id" @input="attitude=$event"></attitude>
        <van-icon class="iconfont icon-pinglun1" badge="9"></van-icon>
        <collect v-model="isCollect" :article-id="articleContent.art_id" @input="isCollect=$event"></collect>
        <van-icon name="share-o"></van-icon>
      </div>
    </div>
    <!-- /底部区域 -->
    <!-- 写评论弹出层 -->
    <van-popup v-model="popupShow" position="bottom" :style="{ height: '19%' }">
      <pub-comment :target="replyId" @post-success="onPostSuccess($event)" @post-success-reply="onPostSuccessReply($event)"></pub-comment>
    </van-popup>
    <!-- /写评论弹出层 -->
    <!-- 回复列表 -->
    <van-popup v-model="replyShow" closeable position="bottom" :style="{ height: '90%' }" class="replyBox">
      <article-comment v-if="replyShow" :list="replyList" :source-id="reply.com_id" :type="'c'" :reply="reply"></article-comment>
      <div v-if="reply" class="toReply"><van-button round @click="popupShow=true">回复评论</van-button></div>
    </van-popup>

    <!-- /回复列表 -->
  </div>
</template>

<script>
import { loadArticle } from '@/api/article.js'
import follow from '@/components/follow.vue'
import collect from '@/components/collect.vue'
import attitude from '@/components/attitude.vue'
// import articleComment from '@/components/article-comment.vue'
import PubComment from './pubComment.vue'
import ArticleComment from './article-comment.vue'
export default {
  name: 'ArticleIndex',
  components: {
    follow,
    collect,
    attitude,
    PubComment,
    ArticleComment
  },
  // 在 home首页通过路由传过来
  // 其他地方可复用  作为子组件
  props: {
    articleId: {
      type: [Number, String, Object],
      required: true
    }
  },
  provide: function() {
    return {
      articleId: this.articleId
    }
  },
  data() {
    return {
      // 是否关注的按钮loading
      isLoading: true,
      articleContent: {},
      errStatus: null,
      isFollow: false,
      isCollect: false,
      attitude: 0,
      test: 1,
      popupShow: false,
      commentList: [],
      replyList: [],
      replyShow: false,
      replyId: null,
      reply: null
    }
  },
  created() {
    this.loadArticle()
  },
  methods: {
    // nav-bar 右边按钮
    onClickRight() {},
    async loadArticle() {
      this.isLoading = true
      try {
        const { data } = await loadArticle(this.articleId)
        this.articleContent = data.data
        console.log(this.articleContent);
        this.isFollow = data.data.is_followed
        this.isCollect = data.data.is_collected
        this.attitude = data.data.attitude
        this.isLoading = false
        this.test = 2
      } catch (error) {
        this.isLoading = false
        if (error.response && error.response.status === 404) {
          this.errStatus = 404
        }
      }
    },
    onPostSuccess(newObj) {
      this.popupShow = false
      // 点击发布，通过改变父组件的值改变里子组件的值，
      // 一开始commentList为空，在子组件里会自己加载10条数据, 然后unshift一条新的， 子组件会跟着改变
      this.commentList.unshift(newObj)
      console.log(this.commentList);
    },
    onPostSuccessReply(newObj) {
      this.replyList.unshift(newObj)
      this.popupShow = false
    },
    getReply(item) {
      console.log(item);
      this.replyShow = true
      this.reply = item
      this.replyId = item.com_id
    }
  }
}
</script>

<style scope lang="less">
@import './github-markdown.css';
.article-container {
  .page-nav-bar {
  }
  .main_wrap {
    padding: 0px 35px;
    .error_wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 100px 40px;
    }
    .article_title {
      font-size: 40px;
      padding: 40px 0 30px;
    }
    .author_info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 136;
      padding-bottom: 20px;
      .van-cell {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        background-color: rgba(0, 0, 0, 0);
        .van-cell__title {
          padding: 0 16px;
          .aut_name {
            color: #363636;
            font-size: 28px;
          }
          .pub_date {
            color: #b4b4b4;
            font-size: 24px;
          }
        }
      }
      img {
        height: 73px;
        width: 73px;
      }
      .van-button {
        width: 170px;
        height: 58px;
        font-size: 28px;
      }
    }
    .article_content {
      padding: 20px 12px 0;
    }
  }
  .comment {
    padding: 0
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    height: 88px;
    width: 100%;
    border-top: 1px solid #ccc;
    padding: 0 26px;
    background-color: #fff;
    .left {
      flex: 50%;
      .van-button {
        height: 45px;
        width: 281px;
        font-size: 30px;
        color: #a7a7a7;
        text-align: left;
        .van-button__content {
          justify-content: flex-start;
        }
      }
    }
    .right {
      flex: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        flex: 1;
        font-size: 38px;
        color: #999;
        .van-info {
          right: 52px;
          top: -1px;
        }
      }
    }
  }
}
.toReply {
    height: 88px;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: #f4f5f6;
    .van-button {
      margin-left: 180px;
      width: 400px;
      height: 60px;
    }
  }
</style>
